<template>
	<view class="pages">
		<scroll-view scrollY class="scroll" @scrolltolower="reachBottom">
			<view class="container" v-for="(item,index) in djRadios" :key="index" @tap="gotoBroad(item.id)">
				<view class="_image">
					<image :src="item.picUrl" mode=""></image>
				</view>
				<view class="_info">
					<text class="title">{{item.name}}</text>
					<text
						class="msg">{{item.programCount}}个声音，播放{{item.playCount | count}}次，by{{item.dj.nickname}}</text>
				</view>
				<view class="_score">9.8</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	export default {
		props: ['djRadios'],
		methods: {
			reachBottom() {
				this.$parent.$parent.$parent.$parent._getmylist()
			},
			gotoBroad(id) {
				uni.navigateTo({
					url: "/view/RadioList/RadioList?id=" + id
				})
			}
		},

		// 过滤器
		filters: {
			count(v) {
				return v > 10000 ? (v / 10000).toFixed(1) + '万' : v
			}
		}

	}
</script>

<style lang="scss" scoped>
	.pages {
		font-family: STXihei;
		background-color: #f6f6f6;
	}

	.scroll {
		height: calc(100vh - 84px);
	}

	.container {
		margin: 30rpx 30rpx;
		display: flex;
		align-items: center;

		._image {
			width: 20%;
			display: flex;
			flex-direction: column;

			image {
				width: 90rpx;
				height: 90rpx;
				border-radius: 15rpx;
				box-shadow: 0px -5px 0px 0px rgba(0, 0, 0, .1);
			}
		}

		._info {
			flex: 1;
			display: flex;
			flex-direction: column;

			.title {
				font-size: 35rpx;
			}

			.msg {
				font-size: 15rpx;
				width: 500rpx;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
			}
		}

		._score {
			width: 10%;
			color: #ff634a;
			font-style: italic;
			font-weight: bold;
		}
	}
</style>
